<template>
  <div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="id" label="Id" width="200px" />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="id" label="Id" width="200px"  />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="depaName" label="岗位" />
        <el-table-column fixed="right" label="操作" width="150px">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="dialogVisible">
      <el-dialog
        v-model="dialogVisible"
        destroy-on-close
        draggable
        append-to-body
        :close-on-click-modal="false"
        title="个人信息"
        width="90%"
        :before-close="handleClose"
      >
        <el-form ref="ruleFormRef" :model="formData" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="formData.name" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" prop="depaName">
                <el-input v-model="formData.depaName" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { getList, getUserInfo } from "@/api/user.js";
import { ref } from "vue";
let tableData = ref([]);
let dialogVisible = ref(false);
let formData = ref({});
// 获取列表数据
getList().then(res => {
  if (res.code == 200) {
    tableData.value = res.data;
    let list = [
      {name : "1",id : 4},
      {name : "1",id : 5},
      {name : "1",id : 6},
      {name : "1",id : 7},
      {name : "1",id : 8},
      {name : "1",id : 8},
      {name : "1",id : 8},
      {name : "1",id : 8},
      {name : "1",id : 8},
      {name : "1",id : 8},
      {name : "1",id : 8},
    ]
    tableData.value.push(...list)
  } else {
    ElMessage.error(res.message);
  }
});
// 编辑
const handleEdit = row => {
  getUserInfo({ id: row.id }).then(res => {
    if (res.code == 200) {
      formData.value = res.data;
      dialogVisible.value = true;
    } else {
      ElMessage.error(res.message);
    }
  });
};
// 删除
const handleDelete = row => {};
// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};
</script>
<style scoped lang="scss">
.el-dialog .is-draggable {
  height: 100% !important;
}
.el-dialog__body {
  height: calc(100% - 100px) !important;
}
.table{
  height:400px;
  overflow-x: auto;
  border: 1px solid red;
}
</style>